<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: sunliq sunliq@chanjet.com
 * @LastEditTime: 2023-06-26 22:12:48
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div class="left_boottom_wrap"  v-if="pageflag">
    <div class="left-top-top">
      <div class="item total">
        <div class="icon">
          <img src="../../assets/img/total-icon.svg" />
        </div>
        <div class="desc">
          <div class="num">246</div>
          <div class="title-desc">测站总数</div>
        </div>
      </div>
      <div class="item test">
        <div class="icon">
          <img src="../../assets/img/test-icon.svg" />
        </div>
        <div class="desc">
          <div class="num">246</div>
          <div class="title-desc">在线测站</div>
        </div></div>
      <div class="item station">
        <div class="icon">
          <img src="../../assets/img/station-icon.svg" />
        </div>
        <div class="desc">
          <div class="num">246</div>
          <div class="title-desc">取水站</div>
        </div></div>
      <div class="item level">
        <div class="icon">
          <img src="../../assets/img/level-icon.svg" />
        </div>
        <div class="desc">
          <div class="num">246</div>
          <div class="title-desc">水位站</div>
        </div></div>

    </div>
    
    <div class="let-top-bottom">
      <!-- <div class="item">
        <div class="online">
          <div class="wrap">
            <span class="pre">{{ online.split('.')[0] }}</span>.<span class="aft">{{ online.split('.')[1] }}%</span>
          </div>
        </div>
        <div class="text">设备在线率</div>
      </div>
      <div class="item">
        <div class="warn">
          <div class="wrap">
          <span class="pre">{{ warn.split('.')[0] }}</span>.<span class="aft">{{ warn.split('.')[1] }}%</span>
        </div>
        </div>
        <div class="text">设备告警率</div>
      </div> -->
      <Echart
          :options="options"
          id="online"
          class="echarts_online"
        ></Echart>
    </div>
  </div>
    <Reacquire v-else @onclick="getData" style="line-height: 200px" />
  </template>
  
  <script>
  import { currentGET } from "api";
  import 'echarts-liquidfill';
  import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
  import Kong from "../../components/kong.vue";
  export default {
    components: { vueSeamlessScroll, Kong },
    data() {
      return {
        online: '84.89',
        warn: '7.83',
        list: [],
        pageflag: true,
        components: vueSeamlessScroll,
        defaultOption: {
          ...this.$store.state.setting.defaultOption,
          singleHeight: 240,
          limitMoveNum: 5, 
          step: 0,
        },
        options: {}
      };
    },
    computed: {
      sbtxSwiperFlag() {
        let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
        if (sbtxSwiper) {
          this.components = vueSeamlessScroll;
        } else {
          this.components = Kong;
        }
        return sbtxSwiper;
      },
    },
    created() {
      
    },
  
    mounted() {
      this.getData();
    },
    methods: {
      addressHandle(item) {
        let name = item.provinceName;
        if (item.cityName) {
          name += "/" + item.cityName;
          if (item.countyName) {
            name += "/" + item.countyName;
          }
        }
        return name;
      },
      getData() {
        this.pageflag = true;
        // this.pageflag =false
        currentGET("big3", { limitNum: 20 }).then((res) => {
          console.log("设备提醒", res);
          if (res.success) {
            this.countUserNumData = res.data;
            this.list = res.data.list;
            this.init(res.data);
            let timer = setTimeout(() => {
              clearTimeout(timer);
              this.defaultOption.step =
              this.$store.state.setting.defaultOption.step;
            }, this.$store.state.setting.defaultOption.waitTime);
          } else {
            this.pageflag = false;
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        });
      },

      init(newData) {
        var value = 0.45;
        var value1 = 0.76;
        var data = [value, value1];
        this.options = {
            title: [
                {
                    text: '本年收缴率',
                    x: '18%',
                    y: '79%',
                    textStyle: {
                        fontSize: 14,
                        fontWeight: '100',
                        color: '#fff',
                        lineHeight: 16,
                        textAlign: 'center',
                    },
                },
                {
                    text: '本月收缴率',
                    x: '52%',
                    y: '79%',
                    textStyle: {
                        fontSize: 14,
                        fontWeight: '100',
                        color: '#fff',
                        lineHeight: 16,
                        textAlign: 'center',
                    },
                },
            ],
            series: [
                {
                    type: 'liquidFill',
                    radius: '65%',
                    center: ['25%', '43%'],
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(149, 142, 255)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(97, 54, 207, 1)',
                                },
                            ],
                            globalCoord: false,
                        },
                    ],
                    data: [value, value], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: 'RGBA(51, 66, 127, 0.7)',
                        borderWidth: 1,
                        borderColor: 'rgba(97, 54, 207, 1)',
                    },
                    label: {
                        normal: {
                            textStyle: {
                                fontSize:28,
                                color: '#fff',
                            },
                        },
                    },
                          outline: {
                              // show: false
                              borderDistance: 0,
                              itemStyle: {
                                  borderWidth: 2,
                                  borderColor: '#112165',
                              },
                          },
                },


                { //第二个球的填充
                    type: 'liquidFill',
                    radius: '65%',
                    center: ['60%', '43%'],
                    color: [
                        {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(102, 255, 255)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(19, 145, 206)',
                                },
                            ],
                            globalCoord: false,
                        },
                    ],
                    data: [value1, value1], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        borderColor: 'rgb(19, 145, 206)',
                        color: 'RGBA(51, 66, 127, 0.7)',
                    },
                    label: {
                        normal: {
                            textStyle: {
                                fontSize: 28,
                                color: '#fff',
                            },
                        },
                    },
                          outline: {
                              // show: false
                              borderDistance: 0,
                              itemStyle: {
                                  borderWidth: 2,
                                  borderColor: '#112165',
                              },
                          },
                },
            ],
        };
      },
    },
  };
  </script>
  <style lang='scss' scoped>
  .left_boottom_wrap {
    overflow: hidden;
    width: 100%;
    height:100%;
    .inner {
      height: calc(100% - 30px);
      width: 100%;
    }
    .table-header {
      height: 30px;
      line-height: 30px;
      .item {
        color: #E6A23C;
      }
    }
  }
  .left-top-top {
    display: flex;
    padding: 0 5px;
    margin-top: 30px;
    .item {
      margin: 0 5px;
      flex: 1;
      height: 60px;
      display: flex;
      .icon {
        display: flex;
        align-items: center;
        width: auto;
        justify-content: flex-end;
        margin-left: 10px;
        margin-right: 10px;
      }
      .desc {
        width: auto;
        .num {
          margin-top:10px;
          text-align: center;
          font-size: 24px;
          font-family: 'DIN ', 'DIN', sans-serif;
    font-weight: 700;
    color: #FFFFFF;
        }
        .title-desc {
          margin-top:6px;
          text-align: center;
          font-family: '微软雅黑', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
        }
      }
    }
  }

  .let-top-bottom {
    display: flex;
    padding: 0 30px;
    margin-top: 10px;
    width: 540px;
    height: 148px;
    .item {
      margin: 0 5px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .text {
      margin-top: 20px;
      text-align: center;
      font-family: '微软雅黑', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #FFFFFF;
    }
    .online {
      width: 88px;
      height: 88px;
      background: url('../../assets/img/w-online.png') center center no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .warn {
      width: 88px;
      height: 88px;
      background: url('../../assets/img/w-warn.png') center center no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
  }
  .pre {
      font-family: 'DIN ', 'DIN', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #FFFFFF;
    font-size: 28px;
    }

  .total {
    
    background: -webkit-linear-gradient(270deg, rgba(149, 142, 255, 1) 0%, rgba(149, 142, 255, 1) 8%, rgba(97, 54, 207, 1) 98%, rgba(97, 54, 207, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(149, 142, 255, 1) 0%, rgba(149, 142, 255, 1) 8%, rgba(97, 54, 207, 1) 98%, rgba(97, 54, 207, 1) 100%);
    background: linear-gradient(180deg, rgba(149, 142, 255, 1) 0%, rgba(149, 142, 255, 1) 8%, rgba(97, 54, 207, 1) 98%, rgba(97, 54, 207, 1) 100%);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'DIN ', 'DIN', sans-serif;
    font-style: normal;
    .icon {
      img {
        display: block;
      width: 40px;
    height: 31px;
      }
    }
  }

  .test {
    background: -webkit-linear-gradient(270deg, rgba(134, 187, 255, 1) 0%, rgba(134, 187, 255, 1) 8%, rgba(0, 83, 215, 1) 97%, rgba(0, 83, 215, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(134, 187, 255, 1) 0%, rgba(134, 187, 255, 1) 8%, rgba(0, 83, 215, 1) 97%, rgba(0, 83, 215, 1) 100%);
    background: linear-gradient(180deg, rgba(134, 187, 255, 1) 0%, rgba(134, 187, 255, 1) 8%, rgba(0, 83, 215, 1) 97%, rgba(0, 83, 215, 1) 100%);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'DIN ', 'DIN', sans-serif;
    font-style: normal;
  }
  .station {
    background: -webkit-linear-gradient(270deg, rgba(51, 255, 204, 1) 0%, rgba(51, 255, 204, 1) 7.000000000000001%, rgba(0, 153, 204, 1) 98%, rgba(0, 153, 204, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(51, 255, 204, 1) 0%, rgba(51, 255, 204, 1) 7.000000000000001%, rgba(0, 153, 204, 1) 98%, rgba(0, 153, 204, 1) 100%);
    background: linear-gradient(180deg, rgba(51, 255, 204, 1) 0%, rgba(51, 255, 204, 1) 7.000000000000001%, rgba(0, 153, 204, 1) 98%, rgba(0, 153, 204, 1) 100%);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'DIN ', 'DIN', sans-serif;
    font-style: normal;
  }
  
  .level {
    background: -webkit-linear-gradient(270deg, rgba(102, 255, 255, 1) 0%, rgba(102, 255, 255, 1) 7.000000000000001%, rgba(19, 145, 206, 1) 98%, rgba(19, 145, 206, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(102, 255, 255, 1) 0%, rgba(102, 255, 255, 1) 7.000000000000001%, rgba(19, 145, 206, 1) 98%, rgba(19, 145, 206, 1) 100%);
    background: linear-gradient(180deg, rgba(102, 255, 255, 1) 0%, rgba(102, 255, 255, 1) 7.000000000000001%, rgba(19, 145, 206, 1) 98%, rgba(19, 145, 206, 1) 100%);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'DIN ', 'DIN', sans-serif;
    font-style: normal;
  }
  .doudong {
    //  vertical-align:middle;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .overflow-y-auto {
    overflow-y: auto;
  }
  
  .left_boottom {
    width: 100%;
    height: 100%;
  
    .left_boottom_item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      font-size: 14px;
      margin: 0 0 20px 0;
      .dibu {
          position: absolute;
          height: 2px;
      width: 95%;
          background-image: url("../../assets/img/zuo_xuxian.png");
          bottom: -12px;
      left: 24px;
      background-size: cover;
        }
      .orderNum {
        margin: 0 16px 0 -20px;
      }
  
      .info {
        margin-right: 10px;
        display: flex;
        align-items: center;
        color: #fff;
  
        .labels {
          flex-shrink: 0;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
        }
  
        .zhuyao {
          color: $primary-color;
          font-size: 15px;
        }
  
        .ciyao {
          color: rgba(255, 255, 255, 0.8);
        }
  
        .warning {
          color: #e6a23c;
          font-size: 15px;
        }
      }
  
      .inner_right {
        position: relative;
        height: 100%;
        width: 380px;
        flex-shrink: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .dibu {
          position: absolute;
          height: 2px;
          width: 104%;
          background-image: url("../../assets/img/zuo_xuxian.png");
          bottom: -10px;
          left: -2%;
          background-size: cover;
        }
        .addresswrap {
          width: 100%;
          display: flex;
          margin-top: 8px;
        }
      }
  
      .wangguan {
        color: #1890ff;
        font-weight: 900;
        font-size: 15px;
        width: 80px;
        flex-shrink: 0;
      }
  
  
      .time {
        font-size: 12px;
        // color: rgba(211, 210, 210,.8);
        color: #fff;
      }
  
      .address {
        font-size: 12px;
        cursor: pointer;
        // @include text-overflow(1);
      }
  
      .types {
        width: 30px;
        flex-shrink: 0;
      }
  
      .typeRed {
        color: #fc1a1a;
      }
  
      .typeGreen {
        color: #29fc29;
      }
    }
  }
  </style>
  <!-- <ul class="user_Overview flex" v-if="pageflag">
        <li class="user_Overview-item" style="color: #00fdfa">
            <div class="user_Overview_nums allnum ">
                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
            </div>
            <p>总设备数</p>
        </li>
        <li class="user_Overview-item" style="color: #07f7a8">
            <div class="user_Overview_nums online">
                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
            </div>
            <p>在线数</p>
        </li>
        <li class="user_Overview-item" style="color: #e3b337">
            <div class="user_Overview_nums offline">
                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

            </div>
            <p>掉线数</p>
        </li>
        <li class="user_Overview-item" style="color: #f5023d">
            <div class="user_Overview_nums laramnum">
                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
            </div>
            <p>告警次数</p>
        </li>
    </ul> -->
    